<script setup lang='ts'>
import { getVideo } from '@/api/index'
import { ref } from 'vue';

const videoList = ref()
const offset = ref(0);

getVideo().then(res => {
    console.log(res.data.data.feeds);
    videoList.value = res.data.data.feeds
})
const active = ref(0)

// 触底
const loading = ref(false);
const finished = ref(false);

const onLoad = () => {
    // 异步更新数据
    loading.value = true; // 开始加载数据
    getVideo(offset.value).then(res => {
        if (videoList.value) {
            videoList.value = [...videoList.value, ...res.data.data.feeds]
            loading.value = false;
            offset.value = offset.value + 10
            // 如果已经加载完所有数据
            if (videoList.value.length >= 100) {
                finished.value = true;
            }
        }
    });
};
</script>

<template>
    <div>
        <van-tabs v-model:active="active" animated>
            <van-tab v-for="tab in ['推荐', '热片解读', '新品预告']" :title="tab">
                <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                    <div v-for="video in videoList" :key="video.id" class="video">
                        <div class="item">
                            <p class="title">{{ video.title }}</p>
                            <video controls :poster="video.images[0].url" :src="video.video.url" preload="none">
                            </video>
                        </div>
                        <div class="user">
                            <div class="userInfo">
                                <img :src="video.user.avatarurl" alt="">
                                <span>{{ video.user.nickName }}</span>
                            </div>
                            <div class="icon">
                                <div class="iconItem"><van-icon name="good-job-o" size="20" color="#777" /><span>{{
                                    video.upCount
                                        }}</span></div>
                                <div class="iconItem"><van-icon name="chat-o" size="20" color="#777" /><span>{{
                                    video.commentCount
                                        }}</span></div>
                                <div class="iconItem"><van-icon name="share-o" size="20" color="#777" /></div>
                            </div>
                        </div>
                    </div>
                </van-list>
            </van-tab>
        </van-tabs>
    </div>
</template>

<style lang="less" scoped>
.video {
    .item {
        width: 100vw;
        position: relative;

        .title {
            position: absolute;
            font-size: 17rem;
            color: #fff;
            top: 0;
            left: 0;
            padding: 0 12rem;
        }

        video {
            width: 100%;
        }
    }

    .user {
        display: flex;
        justify-content: space-between;
        padding: 14rem;

        .userInfo {
            display: flex;
            align-items: center;

            img {
                width: 20rem;
                height: 20rem;
                border-radius: 50%;
                margin-right: 8rem;
            }
        }

        .icon {
            display: flex;
            align-items: center;

            .iconItem {
                margin-left: 20rem;
                display: flex;
                align-items: center;

                span {
                    margin-left: 8rem;
                    color: #777;
                }
            }
        }
    }
}
</style>